import React, { Component } from 'react'
import PropTypes from "prop-types";
import axios from "axios";
import './index.css'


export default class Search extends Component {

  static propTypes = {
    updateAppState: PropTypes.func.isRequired
  }

  search = () => {
    const {inputKey:{value:inputKey}} = this
    const { updateAppState } = this.props

    updateAppState({isFirst: false,isLoading: true})

    axios.get(`https://api.github.com/search/users?q=${inputKey}`).then(res => {
      updateAppState({isLoading: false, userList: res.data.items})
    }).catch(err => updateAppState({err: err.message}))

    
  }
  render() {
    return (
      <div className='search'>
        <h2>搜索github用户</h2>
        <input type="text" ref={e => this.inputKey = e}/>
        <button onClick={this.search}>搜索</button>
      </div>
    )
  }
}
